<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口，使页面在移动设备上正确显示 -->
    <title>我的书店-主页</title> <!-- 页面标题 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap CSS文件 -->
    <!-- 自定义样式 -->
    <style>
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif; /* 更改字体 */
            background-color: #f4f4f9; /* 更改背景颜色 */
        }
        .book-cover {
            width: 100%; /* 图书封面图片宽度占满容器 */
            height: auto; /* 图片高度自适应 */
            border: 1px solid #cfcfcf; /* 更改边框颜色 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }
        .book-info {
            border: 1px solid #cfcfcf; /* 更改边框颜色 */
            padding: 15px; /* 增加内边距 */
            height: 100%; /* 高度占满容器 */
            background-color: #fff; /* 添加背景颜色 */
        }
        .btn-pay {
            background-color: #eaeaea; /* 更改按钮背景颜色 */
            border: 1px solid #cfcfcf; /* 更改按钮边框颜色 */
            color: #4a4a4a; /* 更改按钮文字颜色 */
            display: block; /* 块级元素 */
            margin: 15px auto 0; /* 增加外边距 */
            padding: 10px 20px; /* 增加内边距 */
            text-align: center; /* 文字居中 */
            font-weight: bold; /* 加粗文字 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .btn-pay:hover {
            background-color: #dcdcdc; /* 按钮悬停时的背景颜色 */
        }
        .nav-link {
            border: 1px solid #cfcfcf; /* 更改导航链接边框颜色 */
            margin: 0 10px; /* 增加外边距 */
            padding: 7px 20px; /* 增加内边距 */
            text-decoration: none; /* 去除下划线 */
            color: #4a4a4a; /* 更改文字颜色 */
            font-weight: bold; /* 加粗文字 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }
        .nav-link:hover {
            background-color: #eaeaea; /* 导航链接悬停时的背景颜色 */
        }
        .book-container {
            margin-bottom: 25px; /* 增加底部外边距 */
        }
    </style>
</head>
<body>
    <div class="container mt-4"> <!-- 容器，设置顶部外边距 -->
        <header class="d-flex justify-content-between align-items-center mb-4"> <!-- 页眉，使用Flex布局 -->
            <img src="images/logo.png" alt="Bookshop Logo" class="me-2" width="100"> <!-- 书店标志图片 -->
            <h1 class="text-center flex-grow-1">我的书店</h1> <!-- 书店名称 -->
        </header>
        <nav class="d-flex justify-content-center mb-4"> <!-- 导航栏，使用Flex布局 -->
            <a href="#" class="nav-link">主页</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">关于我们</a> <!-- 导航链接 -->
            <a href="#" class="nav-link">联系我们</a> <!-- 导航链接 -->
        </nav>

        <div class="row"> <!-- 行容器 -->
            <div class="col-md-6 book-container"> <!-- 列容器，每行两个 -->
                <div class="row g-0"> <!-- 子行容器，去除间距 -->
                    <div class="col-4"> <!-- 图片列 -->
                        <img src="images/1.jpg" alt="Book 1" class="book-cover" width="200" height="300"> <!-- 书籍封面图片 -->
                    </div>
                    <div class="col-8"> <!-- 信息列 -->
                        <div class="book-info"> <!-- 书籍信息容器 -->
                            <h5>图书1书名</h5> <!-- 书籍名称 -->
                            <p>图书1简介</p> <!-- 书籍简介 -->
                        </div>
                    </div>
                </div>
                <button class="btn btn-pay" data-price="29.99">支付</button> <!-- 支付按钮 -->
            </div>
            <div class="col-md-6 book-container"> <!-- 第二本书 -->
                <div class="row g-0">
                    <div class="col-4">
                        <img src="images/2.jpg" alt="Book 1" class="book-cover" width="200" height="300">
                    </div>
                    <div class="col-8">
                        <div class="book-info">
                            <h5>图书2书名</h5>
                            <p>图书2简介</p>
                        </div>
                    </div>
                </div>
                <button class="btn btn-pay" data-price="34.99">支付</button>
            </div>
            <div class="col-md-6 book-container"> <!-- 第三本书 -->
                <div class="row g-0">
                    <div class="col-4">
                        <img src="images/3.jpg" alt="Book 1" class="book-cover" width="200" height="300">
                    </div>
                    <div class="col-8">
                        <div class="book-info">
                            <h5>图书3书名</h5>
                            <p>图书3简介</p>
                        </div>
                    </div>
                </div>
                <button class="btn btn-pay" data-price="27.99">支付</button>
            </div>
            <div class="col-md-6 book-container"> <!-- 第四本书 -->
                <div class="row g-0">
                    <div class="col-4">
                        <img src="images/4.jpg" width="200" height="300" alt="Book 4" class="book-cover">
                    </div>
                    <div class="col-8">
                        <div class="book-info">
                            <h5>图书4书名</h5>
                            <p>图书4简介</p>
                        </div>
                    </div>
                </div>
                <button class="btn btn-pay" data-price="31.99">支付</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- 引入Bootstrap JS文件 -->
    <!-- JavaScript -->
    <script>
        // 为每个支付按钮添加点击事件监听器
        document.querySelectorAll('.btn-pay').forEach((button) => {
            button.addEventListener('click', function() {
                // 获取选中支付的书的信息
                const bookTitle = this.closest('.book-container').querySelector('h5').textContent; // 获取书籍名称
                const bookPrice = this.getAttribute('data-price'); // 获取书籍价格
                // 跳转到支付页面并传递书籍名称和价格
                window.location.href = `payment.html?book=${encodeURIComponent(bookTitle)}&price=${bookPrice}`;
            });
        });
    </script>
</body>
</html>